<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="650px"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item prop="partnerName" label="设备组名称">
        <el-input
          placeholder="请输入设备组名称"
          maxlength="36"
          v-model="form.partnerName"
        ></el-input>
      </el-form-item>

      <el-form-item prop="partnerRemark" label="设备组备注">
        <el-input
          placeholder="请输入设备组备注"
          maxlength="100"
          v-model="form.partnerRemark"
        ></el-input>
      </el-form-item>

      <el-form-item prop="partnerRemark" label="设备组状态">
        <el-select v-model="form.status" placeholder="请选择激活码状态">
          <el-option
            v-for="(item, index) in statusOpts"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <div class="camera-title">入口设备配置</div>

      <el-form-item prop="enterCameraName" label="入口设备名称">
        <el-input
          placeholder="请输入入口设备名称"
          maxlength="36"
          v-model="form.enterCameraName"
        ></el-input>
      </el-form-item>

      <el-form-item required prop="enterCameraIp" label="入口设备IP">
        <el-input
          placeholder="请输入入口设备IP"
          maxlength="36"
          v-model="form.enterCameraIp"
        ></el-input>
      </el-form-item>

      <el-form-item prop="enterCameraRemark" label="入口设备备注">
        <el-input
          placeholder="请输入入口设备备注"
          maxlength="100"
          v-model="form.enterCameraRemark"
        ></el-input>
      </el-form-item>

      <el-form-item v-if="form.id" label="入口设备清零">
        <el-button @click="resetVideoHandle(form.enterCameraIp)" type="danger"
          >清零</el-button
        >
      </el-form-item>

      <div class="camera-title">出口设备配置</div>

      <el-form-item prop="outCameraName" label="出口设备名称">
        <el-input
          placeholder="请输出口设备名称"
          maxlength="36"
          v-model="form.outCameraName"
        ></el-input>
      </el-form-item>

      <el-form-item required prop="outCameraIp" label="出口设备IP">
        <el-input
          placeholder="请输入出口设备IP"
          maxlength="36"
          v-model="form.outCameraIp"
        ></el-input>
      </el-form-item>

      <el-form-item prop="outCameraRemark" label="出口设备备注">
        <el-input
          placeholder="请输入出口设备备注"
          maxlength="100"
          v-model="form.outCameraRemark"
        ></el-input>
      </el-form-item>

      <el-form-item v-if="form.id" label="出口设备清零">
        <el-button
          v-if="form.id"
          @click="resetVideoHandle(form.outCameraIp)"
          type="danger"
          >清零</el-button
        >
      </el-form-item>

      <div class="camera-title">预警设置</div>

      <el-form-item required prop="monitorSeconds" label="理论通行时间">
        <el-input
          placeholder="请输入理论通行时间(秒)"
          maxlength="36"
          v-model="form.monitorSeconds"
        ></el-input>
      </el-form-item>

      <el-form-item required prop="monitorNums" label="理论滞留车辆数">
        <el-input
          placeholder="请输入理论滞留车辆数"
          maxlength="100"
          v-model="form.monitorNums"
        ></el-input>
      </el-form-item>

      <el-form-item required prop="maxPercent" label="预警比例值">
        <el-input
          placeholder="请输入预警值，大于1，如1.12"
          maxlength="100"
          v-model="form.maxPercent"
        ></el-input>
      </el-form-item>
      <div class="tips">
        <div v-html="tips1"></div>
        <div v-html="tips2"></div>
      </div>

      <div class="dialog-btns">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="editHandle" type="primary">{{
          form.id ? "编辑" : "新增"
        }}</el-button>
        <el-button v-if="form.id" @click="deleteHandle" type="danger"
          >删除</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>
  
<script>
import {
  monitorPartnersAdd,
  monitorPartnersUpdate,
  monitorPartnersDelete,
} from "@/api/videos/monitorPartners";
import axios from "axios";
export default {
  name: "DepartmentEdit",
  props: {
    formData: {
      type: Object,
    },
    unitOpts: {
      type: Array,
    },
    title: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const ipRule = (rule, value, callback) => {
      let isValidate =
        /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
          value
        );
      if (isValidate) {
        callback();
      } else {
        callback(new Error("请输入正确的IP"));
      }
    };
    const NumberRule = (rule, value, callback) => {
      let isValidate = /^[1-9]\d*$/.test(value);
      if (isValidate) {
        callback();
      } else {
        callback(new Error("请输入正整数"));
      }
    };
    const MaxPercentRule = (rule, value, callback) => {
      let isValidate = /^\d+(\.\d{1,2})?$/.test(value);
      if (value && value > 1 && isValidate) {
        callback();
      } else {
        callback(new Error("请输入预警值，大于1，如1.12"));
      }
    };

    return {
      form: {
        partnerName: "",
        partnerRemark: "",
        enterCameraName: "",
        enterCameraIp: "",
        enterCameraRemark: "",
        outCameraName: "",
        outCameraIp: "",
        outCameraRemark: "",
        monitorNums: "",
        monitorSeconds: "",
        status: 1,
        maxPercent: "",
      },
      statusOpts: [
        {
          label: "设防中",
          value: 1,
        },
        {
          label: "滞留车辆数预警",
          value: 2,
        },
        {
          label: "滞留时间预警",
          value: 3,
        },
        {
          label: "警报中",
          value: 4,
        },
        {
          label: "排查中",
          value: 5,
        },
        {
          label: "停止设防",
          value: 6,
        },
      ],
      rules: {
        partnerName: [
          {
            required: true,
            message: "请输入设备组名称",
            trigger: ["blur", "change"],
          },
        ],
        enterCameraName: [
          {
            required: true,
            message: "请输入入口设备名称",
            trigger: ["blur", "change"],
          },
        ],
        enterCameraIp: [
          {
            validator: ipRule,
            trigger: ["blur", "change"],
          },
        ],
        outCameraName: [
          {
            required: true,
            message: "请输入出口设备名称",
            trigger: ["blur", "change"],
          },
        ],
        outCameraIp: [
          {
            validator: ipRule,
            trigger: ["blur", "change"],
          },
        ],
        monitorNums: [
          {
            validator: NumberRule,
            trigger: ["blur", "change"],
          },
        ],
        monitorSeconds: [
          {
            validator: NumberRule,
            trigger: ["blur", "change"],
          },
        ],
        maxPercent: [
          {
            validator: MaxPercentRule,
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {
    if (this.formData.id) {
      this.form = { ...this.formData };
    }
  },
  methods: {
    editHandle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            monitorPartnersAdd(this.form).then((res) => {
              this.closeDialog("refresh");
            });
          } else {
            monitorPartnersUpdate(this.form).then((res) => {
              this.closeDialog("refresh");
            });
          }
        }
      });
    },
    resetVideoHandle(ip) {
      this.$confirm(`此操作将清零计数器, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 部署到内网才有效
        axios
          .get(
            `http://${ip}/nvc-cgi/admin/vca.cgi?action=update&group=VCA.Ch0.ct0&count=0`
          )
          .then(function (res) {
            //请求成功执行
            console.log(res);
          })
          .catch(function (error) {
            //请求失败执行
            console.log(error);
          })
          .finally((e) => {
            this.$message({
              message: "清零成功!",
              type: "success",
            });
          });
      });
    },
    deleteHandle() {
      this.$confirm(`此操作将永久删除该设备组, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        monitorPartnersDelete({
          id: this.form.id,
        }).then((res) => {
          this.closeDialog("refresh");
        });
      });
    },
    monitorPartnersDeleteApi() {},
    closeDialog(type) {
      this.$emit("closeDialog", "monitorPartnersVisible", type === "refresh");
    },
  },
  computed: {
    dialogTitle() {
      return (this.form.id ? "编辑" : "新增") + this.title;
    },
    tips1() {
      let { monitorNums } = this.form;
      return monitorNums
        ? `当监控路段车辆达到${monitorNums}辆，会标记当前路段拥挤。`
        : "";
    },
    tips2() {
      let { maxPercent, monitorSeconds, monitorNums } = this.form;
      return maxPercent && monitorSeconds && monitorNums
        ? `如果${monitorSeconds}秒后，车辆数达到${monitorNums}x${maxPercent}=${Math.floor(
            monitorNums * maxPercent
          )}俩时，触发预警`
        : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.camera-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
/deep/ .el-select {
  width: 100% !important;
}
.tips {
  padding: 10px 30px;
  text-align: center;
}
</style>